<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        
		<title>CafeHouse - Responsive HTML/CSS Template</title>

        <link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="css/bootstrap-responsive.css" type="text/css" media="screen" />         
        <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="css/colors.css" type="text/css" media="screen" />
        
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" ></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js" type="text/javascript"></script>
         
     <script src="js/bootstrap.min.js"></script>  
     <script src="js/menu.js" type="text/javascript"></script> 
	 <script src="js/jquery.flexslider-min.js" type="text/javascript"></script>
     <script src="js/slides.min.jquery.js" type="text/javascript"></script>
  	 <script src="js/jquery.tweet.js" type="text/javascript"></script>
     <script src="js/init.js" type="text/javascript"></script>

 <script src="js/shortcodes.js" type="text/javascript"></script>        
  <script src="js/scrolltop.js" type="text/javascript"></script>   
        
    
      <link rel="shortcut icon" href="images/favicon.ico">
 
	</head>
    
    
<body>
    <div class="wrap">
    <div class="container">
    <div class="row">
    <div class="span7 logo">
          <h1 id="logo"><a href="index-2.html"><img src="images/logo-cafe.png" alt=""/></a></h1>
            </div><!--end logo--> 
        <div class="span5 open-hours">
         <h3 class="open-title">Open Hours</h3>			
       <div class="open-text">
       <div class="open-day"> <span class="day">Monday - Friday</span> : 09:00 AM - 10:00 PM</div>
       <div class="open-day"> <span class="day">Saturday - Sunday</span> : 09:00 AM - 10:00 PM</div>
       </div>
			
		
		    </div><!--end open-hours--> 

    </div><!--end row--> 
    </div><!--end container--> 
    </div><!--end wrap--> 
	     
        <div id="menu-holder">
        <ul class="menu"><li ><a href="index-2.html">Home</a></li>
<li><a href="about.html">About</a>
<ul class="sub-menu">
	<li><a href="typography.html">Typography</a></li>
	<li class="current_page_item"><a href="#">Shortcodes</a></li>
</ul>
</li>
<li><a href="menu.html">Our Menu</a></li>
<li><a href="reservation.html">Reservations</a></li>
<li><a href="gallery-3col.html">Gallery</a>
<ul class="sub-menu">
	<li><a href="gallery-3col.html">Gallery 3 Columns</a></li>
	<li><a href="gallery-4col.html">Gallery 4 Columns</a></li>
</ul>
</li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>

</div><!--end menu-holder-->

<div class="top-img">
<img src="images/default-top.jpg" title="" alt="" width="1000" height="160"/>
 
<h1 class="post-title-page">Shortcodes</h1>
</div>

<div class="wrap-content">
<div class="container">

			<div class="post" id="post-46">
		<h3 class="divider-title">Buttons</h3>
<p><a class="button button_white" href="http://flashtuning.net/">Button Text</a>   <a class="button button_black" href="http://flashtuning.net/">Button Text</a> <a class="button button_yellow" href="http://flashtuning.net/">Button Text</a> <a class="button button_red" href="http://flashtuning.net/">Button Text</a> <a class="button button_darkred" href="http://flashtuning.net/">Button Text</a>  <a class="button button_orange" href="http://flashtuning.net/">Button Text</a> <a class="button button_green" href="http://flashtuning.net/">Button Text</a> <a class="button button_darkgreen" href="http://flashtuning.net/">Button Text</a> <a class="button button_blue" href="http://flashtuning.net/">Button Text</a> <a class="button button_darkblue" href="http://flashtuning.net/">Button Text</a> </p>
<h4 class="trigger"><a href="#">Get Shortcode</a></h4>
<div class="toggle_container">
<code class="code">[button color="white" link=""]Button Text[/button]<br />
</code>
</div>
<hr />
<h3 class="divider-title">Testimonials</h3>
<blockquote><p>Cras a odio sodales arcu mollis mattis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sollicitudin accumsan diam sed malesuada. Donec ut luctus nisi. </p></blockquote>
<p style="font-size:11px;">- John, project manager</p>
<blockquote><p>Nunc euismod mauris eu mi tempus scelerisque. Maecenas sodales interdum odio ac viverra. Vestibulum in ultrices libero. </p></blockquote>
<p style="font-size:11px;">- Joe, web developer</p>
<h4 class="trigger"><a href="#">Get Shortcode</a></h4>
<div class="toggle_container">
<code class="code">[quote from="John, project manager"]Cras a odio sodales arcu mollis mattis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sollicitudin accumsan diam sed malesuada. Donec ut luctus nisi. [/quote]<br />
</code>
</div>
<div class="return-top"><a href="#logo">TOP</a></div>
<hr />
<h3 class="divider-title">List Styles</h3>
<div class="col-1-4">
<h4>Bullet List</h4>
</div>
<div class="col-1-4">
<h4>Plus List</h4>
</div>
<div class="col-1-4">
<h4>Minus List</h4>
</div>
<div class="col-1-4 last">
<h4>Star List</h4>
</div>
<div class="column-clear"></div>
<div class="col-1-4">
<ul class="bullet_list">
<li>This is item one</li>
<li>This is item two</li>
<li>This is item three</li>
</ul>
</div>
<div class="col-1-4">
<ul class="plus_list">
<li>This is item one</li>
<li>This is item two</li>
<li>This is item three</li>
</ul>
</div>
<div class="col-1-4">
<ul class="minus_list">
<li>This is item one</li>
<li>This is item two</li>
<li>This is item three</li>
</ul>
</div>
<div class="col-1-4 last">
<ul class="star_list">
<li>This is item one</li>
<li>This is item two</li>
<li>This is item three</li>
</ul>
</div>
<div class="column-clear"></div>
<div class="col-1-2">
<h4>Check List</h4>
<ul class="check_list">
<li>Integer sollicitudin accumsan diam sed malesuada</li>
<li>Integer sollicitudin accumsan diam sed malesuada</li>
<li>Integer sollicitudin accumsan diam sed malesuada</li>
</ul>
</div>
<div class="col-1-2 last">
<h4>Cross List</h4>
<ul class="cross_list">
<li>Nunc euismod mauris eu mi tempus scelerisque</li>
<li>Nunc euismod mauris eu mi tempus scelerisque</li>
<li>Nunc euismod mauris eu mi tempus scelerisque</li>
</ul>
</div>
<div class="column-clear"></div>
<h4 class="trigger"><a href="#">Get Shortcode</a></h4>
<div class="toggle_container">
<code class="code">[style_list style="cross_list"]<br />
&lt;li&gt;Nunc euismod mauris eu mi tempus scelerisque&lt;/li&gt;<br />
&lt;li&gt;Nunc euismod mauris eu mi tempus scelerisque&lt;/li&gt;<br />
&lt;li&gt;Nunc euismod mauris eu mi tempus scelerisque&lt;/li&gt;<br />
[/style_list]<br />
</code>
</div>
<div class="return-top"><a href="#logo">TOP</a></div>
<h3 class="divider-title">Tabs Content</h3>
<div class="tabs2">
<ul class="tabs">
<li><a href="#tab0">Tab 1</a></li>
<li><a href="#tab1">Tab 2</a></li>
<li><a href="#tab2">Tab 3</a></li>
<li><a href="#tab3">Tab 4</a></li>
</ul>
<div class="tab_container">
<div id="tab0" class="tab_content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a rutrum mauris. Aliquam rutrum ornare lacus, non pretium diam scelerisque non. Morbi pellentesque, urna quis ultrices dignissim, nulla lacus semper ligula, feugiat sollicitudin purus nisl in leo. Pellentesque ut lorem ac tellus dapibus hendrerit.
</div>
<div id="tab1" class="tab_content">
Nullam at dolor justo. Etiam bibendum augue eget ante laoreet scelerisque. Praesent iaculis aliquam ligula, nec tristique justo viverra vitae. Phasellus posuere, sem nec gravida feugiat, eros elit lacinia lectus, id dapibus ante orci in justo. Vivamus justo tortor, consectetur vel ultrices ut, egestas vitae sapien.
</div>
<div id="tab2" class="tab_content">
Pellentesque bibendum, odio a consequat congue, risus ligula ultricies nisl, at dapibus risus eros eu lacus. Etiam tincidunt, sem pellentesque faucibus pretium, enim augue sodales nisl, sit amet venenatis odio mi ac mi. Vivamus imperdiet, sapien sed ullamcorper fermentum, massa orci elementum lacus, sed dapibus diam risus pellentesque elit.
</div>
<div id="tab3" class="tab_content">
Nunc non egestas sapien. Phasellus sed ante bibendum nisl rutrum hendrerit ut vitae purus. Aenean ante justo, varius nec rhoncus eu, cursus at arcu. Nulla nibh quam, vehicula vel semper ac, aliquam sed velit.
</div>
</div>
</div>
<h4 class="trigger"><a href="#">Get Shortcode</a></h4>
<div class="toggle_container">
<code class="code">[tabs]<br />
[tab title="Tab 1"]<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a rutrum mauris. Aliquam rutrum ornare lacus, non pretium diam scelerisque non. Morbi pellentesque, urna quis ultrices dignissim, nulla lacus semper ligula, feugiat sollicitudin purus nisl in leo. Pellentesque ut lorem ac tellus dapibus hendrerit.<br />
[/tab]<br />
[tab title="Tab 2"]<br />
Nullam at dolor justo. Etiam bibendum augue eget ante laoreet scelerisque. Praesent iaculis aliquam ligula, nec tristique justo viverra vitae. Phasellus posuere, sem nec gravida feugiat, eros elit lacinia lectus, id dapibus ante orci in justo. Vivamus justo tortor, consectetur vel ultrices ut, egestas vitae sapien.<br />
[/tab]<br />
[tab title="Tab 3"]<br />
Pellentesque bibendum, odio a consequat congue, risus ligula ultricies nisl, at dapibus risus eros eu lacus. Etiam tincidunt, sem pellentesque faucibus pretium, enim augue sodales nisl, sit amet venenatis odio mi ac mi. Vivamus imperdiet, sapien sed ullamcorper fermentum, massa orci elementum lacus, sed dapibus diam risus pellentesque elit.<br />
[/tab]<br />
[tab title="Tab 4"]<br />
Nunc non egestas sapien. Phasellus sed ante bibendum nisl rutrum hendrerit ut vitae purus. Aenean ante justo, varius nec rhoncus eu, cursus at arcu. Nulla nibh quam, vehicula vel semper ac, aliquam sed velit.<br />
[/tab]<br />
[/tabs]<br />
</code>
</div>
<div class="return-top"><a href="#logo">TOP</a></div>
<h3 class="divider-title">Toggle Content</h3>
<h4 class="trigger"><a href="#">Click Toggle Title 1</a></h4>
<div class="toggle_container">Nunc non egestas sapien. Phasellus sed ante bibendum nisl rutrum hendrerit ut vitae purus. Aenean ante justo, varius nec rhoncus eu, cursus at arcu. Nulla nibh quam, vehicula vel semper ac, aliquam sed velit.</div>
<h4 class="trigger"><a href="#">Click Toggle Title 2</a></h4>
<div class="toggle_container">Nunc non egestas sapien. Phasellus sed ante bibendum nisl rutrum hendrerit ut vitae purus. Aenean ante justo, varius nec rhoncus eu, cursus at arcu. Nulla nibh quam, vehicula vel semper ac, aliquam sed velit.</div>
<h4 class="trigger"><a href="#">Click Toggle Title 3</a></h4>
<div class="toggle_container">Nunc non egestas sapien. Phasellus sed ante bibendum nisl rutrum hendrerit ut vitae purus. Aenean ante justo, varius nec rhoncus eu, cursus at arcu. Nulla nibh quam, vehicula vel semper ac, aliquam sed velit.</div>
<p><code class="code">[toggle title="Click Toggle Title 1"]Nunc non egestas sapien. Phasellus sed ante bibendum nisl rutrum hendrerit ut vitae purus. Aenean ante justo, varius nec rhoncus eu, cursus at arcu. Nulla nibh quam, vehicula vel semper ac, aliquam sed velit.[/toggle]<br />
</code></p>
<div class="return-top"><a href="#logo">TOP</a></div>
<h3 class="divider-title">Accordion Content</h3>
<div class="accordion-group">
<h3 class="acc-title">Accordion Title 1</h3>
<div class="acc-content">Nunc non egestas sapien. Phasellus sed ante bibendum nisl rutrum hendrerit ut vitae purus. Aenean ante justo, varius nec rhoncus eu, cursus at arcu. Nulla nibh quam, vehicula vel semper ac, aliquam sed velit.</div>
<h3 class="acc-title">Accordion Title 2</h3>
<div class="acc-content">Nunc non egestas sapien. Phasellus sed ante bibendum nisl rutrum hendrerit ut vitae purus. Aenean ante justo, varius nec rhoncus eu, cursus at arcu. Nulla nibh quam, vehicula vel semper ac, aliquam sed velit.</div>
<h3 class="acc-title">Accordion Title 3</h3>
<div class="acc-content">Nunc non egestas sapien. Phasellus sed ante bibendum nisl rutrum hendrerit ut vitae purus. Aenean ante justo, varius nec rhoncus eu, cursus at arcu. Nulla nibh quam, vehicula vel semper ac, aliquam sed velit.</div>
</div>
<h4 class="trigger"><a href="#">Get Shortcode</a></h4>
<div class="toggle_container">
<code class="code">[accordion]<br />
[accordion_item title="Accordion Title 1"]Nunc non egestas sapien. Phasellus sed ante bibendum nisl rutrum hendrerit ut vitae purus. Aenean ante justo, varius nec rhoncus eu, cursus at arcu. Nulla nibh quam, vehicula vel semper ac, aliquam sed velit.[/accordion_item]<br />
[accordion_item title="Accordion Title 2"]Nunc non egestas sapien. Phasellus sed ante bibendum nisl rutrum hendrerit ut vitae purus. Aenean ante justo, varius nec rhoncus eu, cursus at arcu. Nulla nibh quam, vehicula vel semper ac, aliquam sed velit.[/accordion_item]<br />
[accordion_item title="Accordion Title 3"]Nunc non egestas sapien. Phasellus sed ante bibendum nisl rutrum hendrerit ut vitae purus. Aenean ante justo, varius nec rhoncus eu, cursus at arcu. Nulla nibh quam, vehicula vel semper ac, aliquam sed velit.[/accordion_item]<br />
[/accordion]<br />
</code>
</div>
<div class="return-top"><a href="#logo">TOP</a></div>
<h3 class="divider-title">Dropcaps &#038; Highlight</h3>
<div class="col-1-3"><span class="dropcap">P</span>ellentesque bibendum, odio a consequat congue, risus ligula ultricies nisl, at dapibus risus eros eu lacus. Etiam tincidunt, sem pellentesque faucibus pretium, enim augue sodales nisl, sit amet venenatis odio mi ac mi. <span class="text-highlight highlight-black">Vivamus imperdiet, sapien sed</span> ullamcorper fermentum, massa orci elementum lacus, sed dapibus diam risus pellentesque elit. </div>
<div class="col-1-3"><span class="dropcap">O</span>dio a consequat congue, risus ligula ultricies nisl, at dapibus risus eros eu lacus. <span class="text-highlight highlight-yellow">Etiam tincidunt, sem pellentesque faucibus</span> pretium, enim augue sodales nisl, sit amet venenatis odio mi ac mi. Vivamus imperdiet, sapien sed ullamcorper fermentum, massa orci elementum lacus, sed dapibus diam risus pellentesque elit.</div>
<div class="col-1-3 last"><span class="dropcap">R</span>isus ligula ultricies nisl, at dapibus risus eros eu lacus. Etiam tincidunt, sem pellentesque faucibus pretium, enim augue sodales nisl, sit amet venenatis odio mi ac mi. Vivamus imperdiet, <span class="text-highlight highlight-blue">sapien sed ullamcorper fermentum</span>, massa orci elementum lacus, sed dapibus diam risus pellentesque elit.</div>
<div class="column-clear"></div>
<h4 class="trigger"><a href="#">Get Shortcode</a></h4>
<div class="toggle_container">
<code class="code">[one_third][dropcap]P[/dropcap]ellentesque bibendum, odio a consequat congue, risus ligula ultricies nisl, at dapibus risus eros eu lacus. Etiam tincidunt, sem pellentesque faucibus pretium, enim augue sodales nisl, sit amet venenatis odio mi ac mi. [highlight color="black"]Vivamus imperdiet, sapien sed[/highlight] ullamcorper fermentum, massa orci elementum lacus, sed dapibus diam risus pellentesque elit. [/one_third]<br />
[one_third][dropcap]O[/dropcap]dio a consequat congue, risus ligula ultricies nisl, at dapibus risus eros eu lacus. [highlight color="yellow"]Etiam tincidunt, sem pellentesque faucibus[/highlight] pretium, enim augue sodales nisl, sit amet venenatis odio mi ac mi. Vivamus imperdiet, sapien sed ullamcorper fermentum, massa orci elementum lacus, sed dapibus diam risus pellentesque elit.[/one_third]<br />
[one_third_last][dropcap]R[/dropcap]isus ligula ultricies nisl, at dapibus risus eros eu lacus. Etiam tincidunt, sem pellentesque faucibus pretium, enim augue sodales nisl, sit amet venenatis odio mi ac mi. Vivamus imperdiet, [highlight color="blue"]sapien sed ullamcorper fermentum[/highlight], massa orci elementum lacus, sed dapibus diam risus pellentesque elit.[/one_third_last]<br />
</code>
</div>
<div class="return-top"><a href="#logo">TOP</a></div>
<hr />
<h3 class="divider-title">Message boxes</h3>
<div class="success">
<div class="msg-box">Text inside success box. Vestibulum quis urna libero, a venenatis risus. Cum sociis natoque penatibus et magnis dis parturient montes.</div>
</div>
<h4 class="trigger"><a href="#">Get Shortcode</a></h4>
<div class="toggle_container">
<code class="code">[msg_box type="success"]Text inside success box. Vestibulum quis urna libero, a venenatis risus. Cum sociis natoque penatibus et magnis dis parturient montes.[/msg_box]<br />
</code>
</div>
<div class="error">
<div class="msg-box">Text inside error box. Vestibulum quis urna libero, a venenatis risus. Cum sociis natoque penatibus et magnis dis parturient montes.</div>
</div>
<h4 class="trigger"><a href="#">Get Shortcode</a></h4>
<div class="toggle_container">
<code class="code">[msg_box type="error"]Text inside error box. Vestibulum quis urna libero, a venenatis risus. Cum sociis natoque penatibus et magnis dis parturient montes.[/msg_box]<br />
</code>
</div>
<div class="info">
<div class="msg-box">Text inside info box. Vestibulum quis urna libero, a venenatis risus. Cum sociis natoque penatibus et magnis dis parturient montes.</div>
</div>
<h4 class="trigger"><a href="#">Get Shortcode</a></h4>
<div class="toggle_container">
<code class="code">[msg_box type="info"]Text inside info box. Vestibulum quis urna libero, a venenatis risus. Cum sociis natoque penatibus et magnis dis parturient montes.[/msg_box]<br />
</code>
</div>
<div class="notice">
<div class="msg-box">Text inside notice box. Vestibulum quis urna libero, a venenatis risus. Cum sociis natoque penatibus et magnis dis parturient montes.</div>
</div>
<h4 class="trigger"><a href="#">Get Shortcode</a></h4>
<div class="toggle_container">
<code class="code">[msg_box type="notice"]Text inside notice box. Vestibulum quis urna libero, a venenatis risus. Cum sociis natoque penatibus et magnis dis parturient montes.[/msg_box]<br />
</code>
</div>
<div class="return-top"><a href="#logo">TOP</a></div>
<hr />
<h3 class="divider-title">Columns</h3>
<div class="col-1-2">
<h2>Column 1-2</h2>
<p>Cras nisl leo, interdum et aliquam quis, mattis eu dolor. Vestibulum mattis purus eu eros tincidunt vitae sollicitudin massa scelerisque. Fusce non nibh vel odio aliquam convallis ut vel mi. Nunc euismod mauris eu mi tempus scelerisque. Maecenas sodales interdum odio ac viverra. Vestibulum in ultrices libero. Donec interdum magna eget arcu commodo in aliquam neque venenatis.
</p></div>
<div class="col-1-2 last">
<h2>Column 1-2</h2>
<p>Cras nisl leo, interdum et aliquam quis, mattis eu dolor. Vestibulum mattis purus eu eros tincidunt vitae sollicitudin massa scelerisque. Fusce non nibh vel odio aliquam convallis ut vel mi. Nunc euismod mauris eu mi tempus scelerisque. Maecenas sodales interdum odio ac viverra. Vestibulum in ultrices libero. Donec interdum magna eget arcu commodo in aliquam neque venenatis.
</p></div>
<div class="column-clear"></div>
<h4 class="trigger"><a href="#">Get Shortcode</a></h4>
<div class="toggle_container">
<code class="code">[one_half]<br />
&lt;h2&gt;Column 1-2&lt;/h2&gt;<br />
Cras nisl leo, interdum et aliquam quis, mattis eu dolor. Vestibulum mattis purus eu eros tincidunt vitae sollicitudin massa scelerisque. Fusce non nibh vel odio aliquam convallis ut vel mi. Nunc euismod mauris eu mi tempus scelerisque. Maecenas sodales interdum odio ac viverra. Vestibulum in ultrices libero. Donec interdum magna eget arcu commodo in aliquam neque venenatis.<br />
[/one_half]<br />
[one_half_last]<br />
&lt;h2&gt;Column 1-2&lt;/h2&gt;<br />
Cras nisl leo, interdum et aliquam quis, mattis eu dolor. Vestibulum mattis purus eu eros tincidunt vitae sollicitudin massa scelerisque. Fusce non nibh vel odio aliquam convallis ut vel mi. Nunc euismod mauris eu mi tempus scelerisque. Maecenas sodales interdum odio ac viverra. Vestibulum in ultrices libero. Donec interdum magna eget arcu commodo in aliquam neque venenatis.<br />
[/one_half_last]<br />
</code>
</div>
<div class="col-1-3">
<h2>Column 1-3</h2>
<p>Cras nisl leo, interdum et aliquam quis, mattis eu dolor. Vestibulum mattis purus eu eros tincidunt vitae sollicitudin massa scelerisque. Fusce non nibh vel odio aliquam convallis ut vel mi. Nunc euismod mauris eu mi tempus scelerisque. Maecenas sodales interdum odio ac viverra. Vestibulum in ultrices libero. Donec interdum magna eget arcu commodo in aliquam neque venenatis.
</p></div>
<div class="col-1-3">
<h2>Column 1-3</h2>
<p>Cras nisl leo, interdum et aliquam quis, mattis eu dolor. Vestibulum mattis purus eu eros tincidunt vitae sollicitudin massa scelerisque. Fusce non nibh vel odio aliquam convallis ut vel mi. Nunc euismod mauris eu mi tempus scelerisque. Maecenas sodales interdum odio ac viverra. Vestibulum in ultrices libero. Donec interdum magna eget arcu commodo in aliquam neque venenatis.
</p></div>
<div class="col-1-3 last">
<h2>Column 1-3</h2>
<p>Cras nisl leo, interdum et aliquam quis, mattis eu dolor. Vestibulum mattis purus eu eros tincidunt vitae sollicitudin massa scelerisque. Fusce non nibh vel odio aliquam convallis ut vel mi. Nunc euismod mauris eu mi tempus scelerisque. Maecenas sodales interdum odio ac viverra. Vestibulum in ultrices libero. Donec interdum magna eget arcu commodo in aliquam neque venenatis.
</p></div>
<div class="column-clear"></div>
<h4 class="trigger"><a href="#">Get Shortcode</a></h4>
<div class="toggle_container">
<code class="code">[one_third]<br />
&lt;h2&gt;Column 1-3&lt;/h2&gt;<br />
Cras nisl leo, interdum et aliquam quis, mattis eu dolor. Vestibulum mattis purus eu eros tincidunt vitae sollicitudin massa scelerisque. Fusce non nibh vel odio aliquam convallis ut vel mi. Nunc euismod mauris eu mi tempus scelerisque. Maecenas sodales interdum odio ac viverra. Vestibulum in ultrices libero. Donec interdum magna eget arcu commodo in aliquam neque venenatis.<br />
[/one_third]<br />
[one_third]<br />
&lt;h2&gt;Column 1-3&lt;/h2&gt;<br />
Cras nisl leo, interdum et aliquam quis, mattis eu dolor. Vestibulum mattis purus eu eros tincidunt vitae sollicitudin massa scelerisque. Fusce non nibh vel odio aliquam convallis ut vel mi. Nunc euismod mauris eu mi tempus scelerisque. Maecenas sodales interdum odio ac viverra. Vestibulum in ultrices libero. Donec interdum magna eget arcu commodo in aliquam neque venenatis.<br />
[/one_third]<br />
[one_third_last]<br />
&lt;h2&gt;Column 1-3&lt;/h2&gt;<br />
Cras nisl leo, interdum et aliquam quis, mattis eu dolor. Vestibulum mattis purus eu eros tincidunt vitae sollicitudin massa scelerisque. Fusce non nibh vel odio aliquam convallis ut vel mi. Nunc euismod mauris eu mi tempus scelerisque. Maecenas sodales interdum odio ac viverra. Vestibulum in ultrices libero. Donec interdum magna eget arcu commodo in aliquam neque venenatis.<br />
[/one_third_last]<br />
</code>
</div>
<div class="col-1-4">
<h2>Column 1-4</h2>
<p>Cras nisl leo, interdum et aliquam quis, mattis eu dolor. Vestibulum mattis purus eu eros tincidunt vitae sollicitudin massa scelerisque. Fusce non nibh vel odio aliquam convallis ut vel mi. Nunc euismod mauris eu mi tempus scelerisque. Maecenas sodales interdum odio ac viverra.
</p></div>
<div class="col-1-4">
<h2>Column 1-4</h2>
<p>Cras nisl leo, interdum et aliquam quis, mattis eu dolor. Vestibulum mattis purus eu eros tincidunt vitae sollicitudin massa scelerisque. Fusce non nibh vel odio aliquam convallis ut vel mi. Nunc euismod mauris eu mi tempus scelerisque. Maecenas sodales interdum odio ac viverra.
</p></div>
<div class="col-1-4">
<h2>Column 1-4</h2>
<p>Cras nisl leo, interdum et aliquam quis, mattis eu dolor. Vestibulum mattis purus eu eros tincidunt vitae sollicitudin massa scelerisque. Fusce non nibh vel odio aliquam convallis ut vel mi. Nunc euismod mauris eu mi tempus scelerisque. Maecenas sodales interdum odio ac viverra.
</p></div>
<div class="col-1-4 last">
<h2>Column 1-4</h2>
<p>Cras nisl leo, interdum et aliquam quis, mattis eu dolor. Vestibulum mattis purus eu eros tincidunt vitae sollicitudin massa scelerisque. Fusce non nibh vel odio aliquam convallis ut vel mi. Nunc euismod mauris eu mi tempus scelerisque. Maecenas sodales interdum odio ac viverra.
</p></div>
<div class="column-clear"></div>
<h4 class="trigger"><a href="#">Get Shortcode</a></h4>
<div class="toggle_container">
<code class="code">[one_fourth]<br />
&lt;h2&gt;Column 1-4&lt;/h2&gt;<br />
Cras nisl leo, interdum et aliquam quis, mattis eu dolor. Vestibulum mattis purus eu eros tincidunt vitae sollicitudin massa scelerisque. Fusce non nibh vel odio aliquam convallis ut vel mi. Nunc euismod mauris eu mi tempus scelerisque. Maecenas sodales interdum odio ac viverra.<br />
[/one_fourth]<br />
[one_fourth]<br />
&lt;h2&gt;Column 1-4&lt;/h2&gt;<br />
Cras nisl leo, interdum et aliquam quis, mattis eu dolor. Vestibulum mattis purus eu eros tincidunt vitae sollicitudin massa scelerisque. Fusce non nibh vel odio aliquam convallis ut vel mi. Nunc euismod mauris eu mi tempus scelerisque. Maecenas sodales interdum odio ac viverra.<br />
[/one_fourth]<br />
[one_fourth]<br />
&lt;h2&gt;Column 1-4&lt;/h2&gt;<br />
Cras nisl leo, interdum et aliquam quis, mattis eu dolor. Vestibulum mattis purus eu eros tincidunt vitae sollicitudin massa scelerisque. Fusce non nibh vel odio aliquam convallis ut vel mi. Nunc euismod mauris eu mi tempus scelerisque. Maecenas sodales interdum odio ac viverra.<br />
[/one_fourth]<br />
[one_fourth_last]<br />
&lt;h2&gt;Column 1-4&lt;/h2&gt;<br />
Cras nisl leo, interdum et aliquam quis, mattis eu dolor. Vestibulum mattis purus eu eros tincidunt vitae sollicitudin massa scelerisque. Fusce non nibh vel odio aliquam convallis ut vel mi. Nunc euismod mauris eu mi tempus scelerisque. Maecenas sodales interdum odio ac viverra.<br />
[/one_fourth_last]<br />
</code>
</div>
<div class="col-2-3">
<h2>Column 2-3</h2>
<p>Cras nisl leo, interdum et aliquam quis, mattis eu dolor. Vestibulum mattis purus eu eros tincidunt vitae sollicitudin massa scelerisque. Fusce non nibh vel odio aliquam convallis ut vel mi. Nunc euismod mauris eu mi tempus scelerisque. Maecenas sodales interdum odio ac viverra.
</p></div>
<div class="col-1-3 last">
<h2>Column 1-3</h2>
<p>Cras nisl leo, interdum et aliquam quis, mattis eu dolor. Vestibulum mattis purus eu eros tincidunt vitae sollicitudin massa scelerisque. Fusce non nibh vel odio aliquam convallis ut vel mi. Nunc euismod mauris eu mi tempus scelerisque. Maecenas sodales interdum odio ac viverra.
</p></div>
<div class="column-clear"></div>
<h4 class="trigger"><a href="#">Get Shortcode</a></h4>
<div class="toggle_container">
<code class="code">[two_third]<br />
&lt;h2&gt;Column 2-3&lt;/h2&gt;<br />
Cras nisl leo, interdum et aliquam quis, mattis eu dolor. Vestibulum mattis purus eu eros tincidunt vitae sollicitudin massa scelerisque. Fusce non nibh vel odio aliquam convallis ut vel mi. Nunc euismod mauris eu mi tempus scelerisque. Maecenas sodales interdum odio ac viverra.<br />
[/two_third]<br />
[one_third_last]<br />
&lt;h2&gt;Column 1-3&lt;/h2&gt;<br />
Cras nisl leo, interdum et aliquam quis, mattis eu dolor. Vestibulum mattis purus eu eros tincidunt vitae sollicitudin massa scelerisque. Fusce non nibh vel odio aliquam convallis ut vel mi. Nunc euismod mauris eu mi tempus scelerisque. Maecenas sodales interdum odio ac viverra.<br />
[/one_third_last]<br />
</code>
</div>
<div class="return-top"><a href="#logo">TOP</a></div>
<hr />
<h2>Video Embed</h2>
<hr />
<div class="col-1-2">
<h4>YouTube Embed</h4>
<p><iframe width="460" height="249" src="http://www.youtube.com/embed/dJ4Nnr0MXKY?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<div class="col-1-2 last">
<h4>Vimeo Embed</h4>
<p><iframe src="http://player.vimeo.com/video/14955432?title=0&amp;byline=0&amp;portrait=0" width="460" height="249" frameborder="0"></iframe>
</div>
<div class="column-clear"></div>
<h4 class="trigger"><a href="#">Get Shortcode</a></h4>
<div class="toggle_container">
<code class="code">[youtube video_code="dJ4Nnr0MXKY" width="460" height="249"]<br />
[vimeo video_code="14955432" width="460" height="249"]<br />
</code>
</div>
<div class="return-top"><a href="#logo">TOP</a></div>

		</div>
	
        
</div><!-- end container -->
</div><!-- end wrapper-content-->

		<div id="footer">
       
       <div class="container">
       
        <div class="row footer-content">
           
            <div class="span4 footer-box">
            	<div class="footer-widget widget_text"><h4 class="widgettitle2">About Cafehouse</h4>			<div class="textwidget"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet pharetra purus. Sed ut pharetra justo. Vestibulum dapibus nulla ac risus convallis non mollis purus pellentesque. Mauris scelerisque augue tincidunt lorem rutrum vitae rhoncus lorem mattis. Nam pretium commodo quam, nec pellentesque mi consectetur eu. Donec convallis sem erat, sit amet bibendum justo. Duis iaculis lorem sem.</p>
</div>
		</div>            </div>
        
            <div class="span4 footer-box">
            	<div class="footer-widget tweet_widget "><h4 class="widgettitle2">Latest Tweets</h4>
				
				<div class="tweet"></div>
        
		</div>            </div>
        
            <div class="span4 footer-box">
            	<div class="footer-widget widget_text"><h4 class="widgettitle2">Contact us</h4>			<div class="textwidget"><p>501 Boulevard, New York City<br />
New York</p>
<p>Phone: (4444-111.111</p>
<p>Email: your-email@domain.com</p>
</div>
		</div>            </div>
        		 
 </div><!-- end footer - row -->
       

        <div id="copyright">
        <p>&copy; 2012 CafeHouse. All rights reserved.</p>
        </div>
       
        <div class="social">
	    <ul>
               <li class="twitter"><a title="Twitter" href="#" target="_blank" rel="nofollow"></a></li>
                        <li class="facebook"><a title="Facebook" href="#" target="_blank" rel="nofollow"></a></li>
                         <li class="rss"><a title="RSS Feed" href="#" target="_blank" rel="nofollow"></a></li>
                          <li class="stumble"><a title="StumbleUpon" href="#" target="_blank" rel="nofollow"></a></li>
                        <li class="linkedin"><a title="Linkedin" href="#" target="_blank" rel="nofollow"></a></li>
                        <li class="vimeo"><a title="Vimeo" href="#" target="_blank" rel="nofollow"></a></li>
                       <li class="flickr"><a title="Flickr" href="#" target="_blank" rel="nofollow"></a></li>
                       <li class="picasa"><a title="Picasa" href="#" target="_blank" rel="nofollow"></a></li>
        
	</ul>
        </div>
        
        <div class="column-clear"></div>
        
        </div><!--end container-->
        </div><!--end footer-->
		
    <p id="backTop"><a href="#top">Top&uarr;</a></p>

</body>
</html>
